<template>
	<view class="signList">
		<z-paging ref="paging" :refresher-out-rate="0.8" :auto-clean-list-when-reload="false"
			:auto-scroll-to-top-when-reload="false" safe-area-inset-bottom bg-color="#F5F8FE "
			empty-view-img="https://oneredhealth.oss-cn-hangzhou.aliyuncs.com/2023/10/12/987eadb1d50949a0a7e25dbbd99abe30.png"
			empty-view-text="暂无内容" :refresher-status.sync="refresherStatus" auto-scroll-to-top-when-reload
			v-model="dataList" @query="queryList">
			<view class="top flex_wrap row_middle row_between">
				<view class="flex_wrap row_middle pepole">
					<u--image v-if="userDetails.avatar == 'null'" :src="`/static/img/conference/MissingAvatar.png`"
						shape="circle" width="80" height="80"></u--image>
					<u--image v-else :src="
                            userDetails.avatar ||
                            `/static/img/conference/MissingAvatar.png`
                        " shape="circle" width="80" height="80"></u--image>
					<view style="width: 36rpx"></view>
					<view class="flex_wrap flex_column left">
						<view>
							<u--text v-if="userDetails.nickName == 'null'" text="微信用户" color="#FFF" size="40rpx" />
							<u--text v-else :text="
                                    userDetails.nickName ||
                                    '微信用户'
                                " color="#FFF" size="40rpx" />
						</view>
						<view><u--text :text="userDetails.customerPhone" color="#FFF" size="28rpx" bold /></view>
					</view>
				</view>
			</view>
			<view class="cellBox">
				<view class="detail" v-for="(item, index) in dataList" :key="index" @click="to_serviceDetail(item)">
					<view class="detail_title">
						<view class="detail_title_right">
							<u-icon name="/static/img/myUserManage/call.png" size="84rpx" v-if="item.type === 1" />
							<u-icon name="/static/img/myUserManage/email.png" size="84rpx" v-if="item.type === 2" />
							<u-icon name="/static/img/myUserManage/home.png" size="84rpx" v-if="item.type === 3" />
							<u-icon name="/static/img/myUserManage/wx.png" size="84rpx" v-if="item.type === 4" />
							<view class="">
								<u-text :text="item.servicer" bold size="36rpx" color="#333" margin="0 16rpx 0 20rpx" />
								<u-text :text="`服务时间：`+`${item.serviceTime.split(' ')[0]}`" bold size="28rpx"
									color="#666" margin="0 16rpx 0 20rpx" />
							</view>

						</view>
						<view class="btn">{{ statusMap[item.type] }}</view>
					</view>
				</view>
			</view>
		</z-paging>
	</view>
</template>

<script>
	import {
		serviceListByuser
	} from "@/api/salesmanMeeting.js";

	export default {
		data() {
			return {
				customerId: '',
				dataList: [],
				statusMap: {
					1: "电话",
					2: "邮件",
					3: "上门",
					4: "微信",
				},
				status: '2',
				userDetails: {},
				itemList: []
			};
		},
		onLoad(options) {
			this.phone = options.customerPhone;
			this.userDetails = options
		},
		methods: {
			queryList(pageNo, pageSize) {
				serviceListByuser(this.phone)
					.then((res) => {
						this.total = res.data.total;
						this.$refs.paging.completeByNoMore(res.data, false);
					})
					.catch(() => {
						this.$refs.paging.complete(false);
					});
			},
			to_serviceDetail(item) {
				const data = JSON.stringify(item);
				this.$u.route({
					url: '/pages_my/user_manage/serviceList/detail',
					params: {
						data,
					},
				});
			}
		},
	};
</script>

<style lang="scss" scoped>
	.signList {
		::v-deep.u-line {
			height: auto !important;
		}

		position: relative;
	}

	.pepole {
		padding-left: 80rpx;
		padding-bottom: 64rpx;
	}

	.top {
		height: 372rpx;
		width: 100%;
		box-sizing: border-box;
		background-image: url("@/static/img/conference/userDetailsbg.png");
		background-size: cover;
	}

	.cellBox {
		width: 92vw;
		margin: 88rpx auto 0;

		::v-deep .u-cell {
			box-shadow: 0 0 12rpx 2rpx rgba(0, 0, 0, 0.08);
			margin-top: 32rpx;
			border-radius: 20upx;
		}

		::v-deep .u-cell__body {}
	}

	.detail {
		width: 100%;
		padding: 40rpx 32rpx 40rpx 20rpx;
		box-sizing: border-box;
		border-radius: 20rpx;
		margin-bottom: 40rpx;
		background: #ffffff;

		&_title {
			width: 100%;
			box-sizing: border-box;
			display: flex;
			justify-content: space-between;
			align-items: center;

			&_right {
				display: flex;
				align-items: center;
			}
		}

		.btn {
			width: 140rpx;
			height: 58rpx;
			background: #EAF2FF;
			border-radius: 58rpx;
			font-size: 32rpx;
			color: #588BF3;
			text-align: center;
			line-height: 58rpx;
		}
	}
</style>
